<template>
  <div class="topic">
    <div class="topic-box" v-for="item in topiclist" :key="item.id">
      <img :src="item.scene_pic_url" alt="" />
      <h3>{{ item.title }}</h3>
      <h4>{{ item.subtitle }}</h4>
      <p>{{ item.price_info | RMBFormat }}</p>
    </div>
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      mode="simple"
    />
  </div>
</template>

<script>
import { GetTopicData } from "@/request/api";
export default {
  components: {
    // GetTopicData,
  },
  data() {
    return {
      currentPage: 1,
      topiclist: [],
      totalPages: null,
      Pagesize: 10,
    };
  },
  created() {
    GetTopicData({
      page: 1,
      size: 10,
    }).then((res) => {
      let { currentPage, totalPages, data, pageSize } = res.data;
      this.currentPage = currentPage;
      this.totalPages = totalPages;
      this.topiclist = data;
      this.Pagesize = pageSize;
      console.log(res.data);
    });
  },
  methods: {},
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-bottom: 0.5rem;
}
.topic-box {
  width: 100%;
  height: 3.28rem;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0.2rem;
  img {
    width: 100%;
    height: 2.08rem;
  }
  h3 {
    /* width: 90%; */
    font-size: 18px;
    line-height: 0.3rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  h4 {
    font-size: 16px;
    line-height: 0.3rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  p {
    font-size: 14px;
    line-height: 0.3rem;
    color: #8b0000;
  }
}
/* .van-pagination {
  margin-bottom: 1rem;
} */
</style>